<template>
  <div>
    <!-- 返回 -->
    <top-back>
      <template v-slot:back>设置</template>
    </top-back>

    <!-- 用户信息 -->
    <div @click="onSetUserInfo">
      <user-info class="user-info">
        <template v-slot:desc>
          <p>账号：{{ user.id }}</p>
        </template>
        <template v-slot:right>
          <van-icon name="arrow" color="#999"/>
        </template>
      </user-info>
    </div>

    <!-- 收货地址 -->
    <van-cell title="收货地址" is-link @click="onSetAddress" />

    <!-- 支付设置 -->
    <van-cell-group class="cell_grop" @click="onUndev">
      <van-cell title="账户与安全" is-link />
      <van-cell title="支付设置" is-link />
    </van-cell-group>

    <!-- 其他设置 -->
    <van-cell-group class="cell_grop" @click="onUndev">
      <van-cell title="音效与通知" is-link />
      <van-cell title="通用" is-link />
      <van-cell title="关于我们" is-link />
    </van-cell-group>

    <!-- 退出登录 -->
    <van-button block class="logout" @click="logout">退出登录</van-button>
  </div>
</template>

<script>
import UserInfo from '@/components/Mine/UserInfo.vue'
import TopBack from '@/components/Mine/TopBack'
import { Toast } from 'vant'

export default {
  name: 'SetView',
  data () {
    return {
      user: {
        id: 1001
      }
    }
  },
  components: {
    UserInfo,
    TopBack
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },
    onSetUserInfo () {
      this.$router.push({ path: '/setuserinfo' })
    },
    onSetAddress () {
      this.$router.push({ path: '/choseaddress' })
    },
    onUndev () {
      Toast('功能待开发')
    },
    logout(){
      console.log('退出登录');
      this.$store.dispatch('removeUser')
      //清token
      localStorage.removeItem('token')
      this.$toast('退出登录')
      setTimeout(()=>{
        this.$router.go(-1)
      },2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar__text,
.van-nav-bar__arrow {
  color: #333 !important;
}
.user-info {
  border-bottom: 1px solid #e0e0e0;
}
.cell_grop {
  margin: 0.25rem 0;
}
.logout {
  position: absolute;
  bottom: 0rem;
  color: #ff6600;
}
</style>
